<template>
    <div>
        <!-- 页头 -->
        <div class="i-layout-page-header">
            <PageHeader title="英雄被动管理页面" content="英雄被动的列表，包含增删改查等基础操作。" hidden-breadcrumb/>
        </div>

        <!-- 计算数量区域 -->
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Row type="flex" justify="center" align="middle" class="ivu-text-center">
                <Col :xl="8" :lg="8" :md="8" :sm="24" :xs="24" class="ivu-mt ivu-mb">
                    <p>英雄总数</p>
                    <p v-font="24">{{ page.total }}</p>
                </Col>
                <Col :xl="8" :lg="8" :md="8" :sm="24" :xs="24" class="ivu-mt ivu-mb">
                    <p>未完成数量</p>
                    <p v-font="24">{{ countChampionHavePassive2 }}</p>
                </Col>
                <Col :xl="8" :lg="8" :md="8" :sm="24" :xs="24" class="ivu-mt ivu-mb">
                    <p>已完成数量</p>
                    <p v-font="24">{{ countChampionHavePassive }}</p>
                </Col>
            </Row>
        </Card>

        <!-- 列表展示 -->
        <Card title="英雄被动信息" :bordered="false" dis-hover class="ivu-mt">
            <div>
                <Button long type="dashed" icon="md-add" @click="handleAdd">添加</Button>
                <List :loading="loading" class="ivu-mt">
                    <div v-height="300" v-if="loading"></div>
                    <ListItem v-for="(item, index) in championPassiveListVO" :key="item.id">
                        <ListItemMeta :title="item.name" :description="item.description">
                            <Avatar :src="item.image" shape="square" size="large" slot="avatar"/>
                        </ListItemMeta>
                        <div class="list-basic-list-content">
                            <div class="list-basic-list-content-item">
                                <p>{{ item.title }}</p>
                            </div>
                        </div>
                        <template slot="action">
                            <li>
                                <Button type="text" @click="handleUpdate(index, item.id)">编辑</Button>
                            </li>
                            <li>
                                <Button type="text" @click="handleDelete(item.id)">删除</Button>
                            </li>
                        </template>
                    </ListItem>
                </List>
                <div class="ivu-mt ivu-text-right">
                    <Page :total="page.total" :current="page.current" show-total show-sizer @on-change="pageNumChange"
                          @on-page-size-change="pageSizeChange"/>
                </div>
            </div>
        </Card>

        <!-- 编辑/新增弹出框 -->
        <Modal v-model="showUpdate" title="英雄被动" :loading="submitting" @on-ok="handleSubmit">
            <Form :model="newData" :rules="rules" ref="form">
                <FormItem label="英雄被动名称：" prop="name">
                    <Input v-model="newData.name" placeholder="请输入英雄被动名称"/>
                </FormItem>
                <FormItem label="英雄被动图片：" prop="files">
                    <img v-show="newData.image" class="passiveImage" :src="newData.image" />
                    <Upload action="http://localhost:8080/uploads/passive" name="files" :on-success="uploadSuccess" :show-upload-list="false">
                        <Button icon="ios-cloud-upload-outline">上传图片</Button>
                    </Upload>
                </FormItem>
                <FormItem label="所属英雄：" >
                    <Select v-if="newData.championId === ''" v-model="newData.title" placeholder="请选择所属英雄" prop="title">
                        <Option v-for="(item, index) in searchNoPassiveChampionList" :key="index" :value="item.id">{{ item.title }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="英雄被动描述：" prop="description">
                    <Input v-model="newData.description" type="textarea" placeholder="请输入英雄被动描述"/>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    // 引入请求接口
    import {
        // 已使用
        listChampionPassiveVO,
        countChampionHavePassiveF,
        listChampionPassiveVOPage,
        deleteChampionPassiveById,
        searchNoPassiveChampionF,
        searchChampionId,
        titleToPassiveF,
        idToTitleF,
        updateChampionPassiveF,
        newChampionPassiveF,
        // 未使用
        set0F,
        set1F,
        getChampionPassiveById,
    } from '@/api/champion-passive';

    // 模板自带
    const baseData = {
        name: '',
        image: '',
        title: '',
        description: '',
        championId: '',
        alias: '',
    };

    export default {
        name: 'champion-passive',
        data() {
            return {
                // 模板自带
                data: [],
                updateIndex: -1,
                newData: Object.assign({}, baseData),
                rules: {
                    name: [
                        {required: true, message: '请输入被动名称', trigger: 'blur'}
                    ],
                    title: [
                        {required: true, message: '请选择英雄', trigger: 'change'}
                    ],
                    description: [
                        {required: true, message: '请选择被动描述', trigger: 'blur'}
                    ],
                },
                // 组件自带
                loading: false,
                showUpdate: false,
                submitting: true,
                // 英雄被动数组
                championPassiveListVO: [],
                // 所有英雄数量
                countChampionHavePassive: 0,
                // 分页展示
                page: {
                    total: 0,
                    current: 1
                },
                // 分页查询
                query: {
                    pageNum: 0,
                    pageSize: 10,
                },
                // 没有设置被动的英雄的列表
                searchNoPassiveChampionList: [],
            }
        },
        computed: {
            // 计算未完成数量
            countChampionHavePassive2: function() {
                return this.page.total - this.countChampionHavePassive;
            }
        },
        methods: {
            // 模板自带
            getData() {
                this.loading = true;
                setTimeout(() => {
                    this.data = listData;
                    this.loading = false;
                }, 1000);
            },
            handleClickMore(name, index) {
                if (name === 'update') {
                    this.handleUpdate(index);
                } else if (name === 'delete') {
                    this.$Modal.confirm({
                        title: '删除任务',
                        content: '确定删除该任务吗？',
                        onOk: () => {
                            this.data.splice(index, 1);
                            this.$Message.success('删除成功');
                        }
                    });
                }
            },
            handleAdd() {
                this.newData = Object.assign({}, baseData);
                this.updateIndex = -1;
                this.showUpdate = true;
                this.$refs.form.resetFields();
                // 执行下拉列表数据请求
                this.initNoPassiveChampionList();
            },
            handleUpdate(index,id) {
                this.$refs.form.resetFields();
                this.newData = Object.assign({}, this.championPassiveListVO[index]);
                this.updateIndex = index;
                this.showUpdate = true;
                // 根据 id 去查找英雄 title
                this.idToTitleImpl(id);
                console.log(this.newData);
            },
            handleSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        setTimeout(() => {
                            if (this.updateIndex >= 0) {
                                this.data[this.updateIndex] = Object.assign({}, this.newData);
                            } else {
                                this.data.push(this.newData);
                            }
                            if(this.newData.championId) {
                                console.log("edit");
                                // console.log(this.newData);
                                this.updateChampionPassiveImpl(this.newData);
                            } else {
                                console.log("add");
                                this.newData.alias = this.newData.title + "_P";
                                this.newData.championId = this.newData.title;
                                // this.searchIdByTitle(this.newData.title);
                                console.log(this.newData);
                                // this.set1FImpl(this.newData.title);
                                this.newChampionPassiveImpl(this.newData);
                            }
                            this.$Message.success('编辑成功!');
                            this.showUpdate = false;
                            this.submitting = false;
                            this.$nextTick(() => {
                                this.submitting = true;
                            });
                            // 刷新页面
                            window.location.reload();
                        }, 1000);
                    } else {
                        this.submitting = false;
                        this.$nextTick(() => {
                            this.submitting = true;
                        });
                    }
                });
            },
            // 获取英雄被动全部列表
            initChampionPassiveVO() {
                listChampionPassiveVO().then((res) => {
                // console.log(res);
                this.championPassiveListVO = res;
                })
            },
            // 初始化英雄总数
            initCount() {
                countChampionHavePassiveF().then((res) => {
                // console.log(res);
                this.countChampionHavePassive = res;
                })
            },
            // 更新页码
            pageNumChange(num) {
                this.query.pageNum = num
                // 重新获取数据
                this.listChampionPassive();
            },
            // 更新每页显示数量
            pageSizeChange(size) {
                this.query.pageSize = size
            },
            // 更新英雄被动列表
            listChampionPassive() {
                listChampionPassiveVOPage(this.query).then(res => {
                    // console.log(res)
                    this.championPassiveListVO = res.list;
                    this.page.total = res.total;
                    this.page.current = res.pageNum;
                })
            },
            // 删除功能
            handleDelete(ChampionId) {
                this.$Modal.confirm({
                    title: '删除英雄被动',
                    content: '确定删除该英雄的被动吗？',
                    onOk: () => {
                        deleteChampionPassiveById(ChampionId).then(res => {
                            this.$Message.success('删除成功');
                            window.location.reload();
                        });
                    }
                });
            },
            // 上传成功返回
            uploadSuccess(response, file, fileList) {
                console.log(response);
                // 获取返回响应数组的第一个元素
                this.newData.image = response.pop();
            },
            // 初始化没有被动的英雄的信息
            initNoPassiveChampionList() {
                searchNoPassiveChampionF().then((res) => {
                    // console.log(res);
                    this.searchNoPassiveChampionList = res;
                    console.log(this.searchNoPassiveChampionList);
                })
            },
            // 根据英雄 title 查找 id
            searchIdByTitle(title) {
                searchChampionId(title).then((res) => {
                    // console.log(res);
                    this.newData.championId = res;
                })
            },
            // 根据英雄 title 查找 have_passive
            titleToPassiveImpl(title) {
                titleToPassiveF(title).then((res) => {
                    // console.log(res);
                })
            },
            // 根据英雄 id 查找 title
            idToTitleImpl(id) {
                idToTitleF(id).then((res) => {
                    // console.log(res);
                    this.searchNoPassiveChampionList = res;
                })
            },
            // 更新
            updateChampionPassiveImpl(passive) {
                updateChampionPassiveF(passive).then((res) => {
                    console.log(res);
                })
            },
            // 新增
            newChampionPassiveImpl(passive) {
                newChampionPassiveF(passive).then((res) => {
                    console.log(res);
                })
            },
        },
        mounted() {
            // this.getData();
            // this.initChampionPassiveVO();
            this.initCount();
            this.listChampionPassive();
        }
    }
</script>
<style lang="less">
    .list-basic-list {
        &-content {
            font-size: 0;
        }

        &-content-item {
            display: inline-block;
            margin-left: 32px;
            color: #808695;
            font-size: 14px;
            vertical-align: middle;
        }
    }

    .passiveImage {
        width: 40px;
        height: 40px;
    }

</style>
